<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
    <style>
        .box1{
            border: 10px red solid;
            /* overflow: hidden; */

            /* flow-root将元素的特点设置为何根元素一致 */
            display: flow-root;

            /* 
                通过开启BFC来解决高度塌陷问题
                    BFC（块级格式化环境）
                        - BFC是元素的一个隐含属性，开启BFC后相当于元素成为了一个独立的布局区域
                        - 元素开启BFC后会具有如下特点：
                            1.开启BFC后，元素不会被浮动元素所覆盖
                            2.开启BFC后，元素垂直外边距不会传递给父元素
                            3.开启BFC后，元素可以包含浮动的子元素 *****
                        - 如何开启BFC
                            - BFC是隐含属性无法直接开启，但是可以通过其他属性间接开启
                                间接开启通常会带来一些副作用
                            - 方式
                                1. 设置浮动（会使元素脱离文档流）
                                2. 设置绝对定位（会使元素脱离文档流）
                                3. 将overflow设置为一个非visible的值
                                    通常我们会使用 overflow: hidden; 来开启bfc
                                    从而解决高度塌陷的问题
                                4.设置 display: flow-root;（无副作用，不兼容IE）
            */
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: #bfa;

            float: left;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: greenyellow;

            /* float: left; */

            overflow: hidden;
        }

        .box4{
            width: 200px;
            height: 200px;
            background-color: orange;

            /* 开启BFC */
            /* overflow: hidden; */
        }

        .box5{
            width: 100px;
            height: 100px;
            background-color: tomato;

            margin-top: 100px;
        }

    </style>
</head>
<body>
    <!-- <div class="box1">
        <div class="box2"></div>
    </div> -->
    

    <div class="box3">
        <div class="box5"></div>
    </div>
    <div class="box4"></div>
    

</body>
</html>